<template>
  <view>
    <!-- 1 黑马首页搜索部分 start -->
    <ugo-search></ugo-search>
    <!-- 1 黑马首页搜索部分 end -->

    <!-- 2 黑马首页轮播图部分 start -->
    <u-swiper 
    :list="swiperList" 
    name="image_src"
    mode="dot"
    height="340"
    ></u-swiper>
    <!-- 2 黑马首页轮播图部分 end -->

    <!-- 3 导航模块 start -->
    <view class="nav u-flex">
      <navigator
        class="u-flex-1 u-p-15"
        v-for="item in navList"
        :key="item.name"
      >
        <u-image
          mode="widthFix"
          :src="item.image_src"
        ></u-image>
      </navigator>
    </view>
    <!-- 3 导航模块 end -->

    <!-- 4 导航模块 start -->
    <view class="floor">
      <!-- 循环创建楼层部分 -->
      <view v-for="item in floorList" :key="item.name" class="u-m-t-15">
        <!-- 标题显示 -->
        <!-- {{item.floor_title.name}} -->
        <view class="floor_title " >
          <u-image :src="item.floor_title.image_src" mode="widthFix"></u-image>
        </view>
        <!-- 内容部分 -->
        <view class="floor_content">
        <navigator  v-for="img in item.product_list" :key="img.name">
          <u-image :src="img.image_src" mode="scaleToFill" width="100%" height="100%"></u-image>
        </navigator>
        </view>
      </view>
    </view>
    <!-- 4 导航模块 end -->

  </view>
</template>

<script>
export default {
  data(){
    return {
      // 轮播图数据
      swiperList: [],
      // 导航部分数据
      navList: [],
      // 楼层渲染的数据
      floorList:[]
    }
  },
  onLoad(){
      this.getSwiper()
      this.getNav()
      this.getFloor()
    },
  methods:{
    // 声明一个请求轮播图数据的函数
    async  getSwiper() {
      // const  [error,res] = await  uni.request({
      //   url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      // });
      // if(!error){
      //   console.log(27,res);
      //   this.swiperList = res.data.message
      // }else{
      //   console.log('请求数据出错');
      // }      
     this.swiperList = await this.$u.http.get('/home/swiperdata') 
    },
    // 获取导航栏的数据
    async getNav() {
     this.navList = await this.$u.http.get('/home/catitems') 
    },
    async getFloor() {
     this.floorList = await this.$u.http.get('/home/floordata') 
    }
  }

}
</script>

<style lang="scss" scoped>
 
  .floor{
    .floor_content{
      overflow: hidden;
    }
    .floor_content navigator{
      float: left;
      width: 232rpx;
      margin-left: 13rpx;
    }
    .floor_content navigator:first-child{
      width: 232rpx;
      height: 386rpx;
    }
    .floor_content navigator:nth-last-child(-n+4){
      width: 232rpx;
      height: 188rpx;
    }
    .floor_content navigator:nth-last-child(-n+2){
      margin-top: 6px;
    }
  }
</style>